<template>
  <div class="home">
    <div class="el-header-nav">
      <img
        src="../../../assets/shop.png"
        alt=""
        style="width: 45px; margin-left: 20px"
      />
      <el-menu mode="horizontal" style="margin-left: 40px" router>
        <el-menu-item
          index="shopping"
          :route="{
            path: '/shopping',
          }"
          >下单</el-menu-item
        >
        <el-menu-item
          index="personal"
          :route="{
            path: '/personal',
          }"
          >个人中心</el-menu-item
        >
      </el-menu>
      <el-dropdown class="userInfo" @command="commandHandler"
        ><div style="margin-left: 900px" class="fontStyle">
          <span>欢迎回来，亲爱的{{ customer.customerName }}</span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
          <el-dropdown-item command="logout" divided>注销登录</el-dropdown-item>
        </el-dropdown-menu></el-dropdown
      >

      <img
        src="@/assets/shop_car.png"
        alt=""
        style="width: 45px; margin-left: 10px"
        @click="show_car"
      />
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import bus from "@/utils/bus.js";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      customer: Cookies.get("customerInfo")
        ? JSON.parse(Cookies.get("customerInfo"))
        : {},
    };
  },
  methods: {
    show_car() {
      bus.$emit("share_id", "kaiqi");
      console.log("hhh");
    },
    commandHandler(cmd) {
      if (cmd === "userInfo") {
        let path = this.$route.path;
        if (path === "/personal") {
          this.$notify.error("当前已经在个人中心页面");
          return;
        }

        this.$router.push("/personal");
        console.log(path);
      }
      if (cmd === "logout") {
        this.$confirm("此操作将注销登录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
      }
    },
  },
};
</script>

<style>
.home {
  background: white;
  width: 100%;
  height: calc(100vh - 62px);
}

.el-header-nav {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 5px 15px rgba(20, 20, 20, 0.8);
  align-items: center;
  backdrop-filter: blur(50px);
  display: flex;
}
.fontStyle {
  color: #333436;
  font-family: "楷体";
  font-weight: 600;
  font-size: 20px;
  margin: 4px 4px 0 0;
}
</style>